<template>
    <div>
        <button @click="index--" v-show="index > 0">上一页</button>
    </div>
    <img :src="imgList[index]" alt="">
    <div>
        <button @click="index++" v-show="index < imgList.length - 1">下一页</button>
    </div>
</template>

<script setup>
    const imgList = [
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif', 
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png']

    import { ref } from 'vue'
    let index = ref(0)
</script>

<style>
    #app{
        display:flex;
        width:500px;
        height:240px;
    }
    img{
        width:240px;
        height:240px;
    }
    #app div{
        flex: 1;
        display:flex;
        justify-content: center;
        align-items: center;
    }
</style>